<%-- 
    Document   : template
    Created on : Aug 18, 2014, 5:50:08 AM
    Author     : HT
--%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blog Logon</title>
<link type="text/css"
	href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600'
	rel='stylesheet'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="resources/main/css/bootstrap.min.css"
	rel="stylesheet">
<link type="text/css"
	href="resources/main/css/bootstrap-responsive.min.css" rel="stylesheet">
<link type="text/css" href="resources/main/css/theme.css"
	rel="stylesheet">
<link type="text/css" href="resources/main/css/font-awesome.css"
	rel="stylesheet">
<link type="text/css"
	href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600'
	rel='stylesheet'>
<%-- 
    Java Script
    --%>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/signin/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/signin/js/getListReportTransactionByAdmin.js"></script>
<script src="resources/main/js/jquery-1.9.1.min.js"
	type="text/javascript"></script>
<script src="resources/main/js/jquery-ui-1.10.1.custom.min.js"
	type="text/javascript"></script>
<script src="resources/main/js/bootstrap.min.js" type="text/javascript"></script>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript"
	src="resources/main/js/tablecontroll/paging.js"></script>
<script type="text/javascript"
	src="resources/main/js/tablecontroll/sorttable.js"></script>

<script type="text/javascript"
	src="resources/main/js/jquery.inputmask.js"></script>
<script type="text/javascript"
	src="resources/main/js/jquery.inputmask.extensions.js"></script>
<script type="text/javascript"
	src="resources/main/js/jquery.inputmask.date.extensions.js"></script>
	
	
<style type="text/css" rel="stylesheet">
table {
	color: black;
	font-size: 13px;
}

label {
	color: black;
}

th, td {
	text-align: center;
}
</style>
<script type="text/javascript">
	function printPage(id) {
		var html = "<html><head>";
		html += "<link type='text/css' href='resources/main/css/bootstrap.min.css' rel='stylesheet'>";
		html += "<link type='text/css' href='resources/main/css/theme.css' rel='stylesheet'></head>";

		html += document.getElementById(id).innerHTML;
		html += "</html>";

		var printWin = window
				.open('', '',
						'left=0,top=0,width=1000,height=800,toolbar=0,scrollbars=0,status  =0');
		printWin.document.write(html);
		printWin.document.close();
		printWin.focus();

		// printWin.print();
		//printWin.close();
	}

	function exportPDF() {
		// PDF

		// alert("pdf");
		var searchName = $("#txtSearchByFirstName").val();
		var accImp = $("#txtUserNameImpact").val();
		var accAff = $("#txtUserNameAffected").val();
		var fromDate = $("#txtFromDate").val();
		var toDate = $("#txtToDate").val();
		var cbRole = $("#cbbRole").val();
		var cbStatus = $("#cbbStatus").val();

		if (searchName != "" && accImp == "") {
			accImp = searchName;
		}
		var url = 'generatePDF.html?txtUserNameImpact=' + accImp
				+ '&txtUserNameAffected=' + accAff + '&txtFromDate=' + fromDate
				+ '&txtToDate=' + toDate + '&cbbRole=' + cbRole + '&cbbStatus'
				+ cbStatus;

		window.open(url);

	}
</script>
</head>
<body>
	<div class="navbar navbar-fixed-top">
		<%@include file="head-banner.jsp"%>
		<!-- /navbar-inner -->
	</div>
	<!-- /navbar -->
	<div class="wrapper">
		<div class="container">
			<div class="row">
				<%@include file="left-banner.jsp"%>
				<!--/.span3-->
				<div class="span9">
					<div class="content" style="width: 100%">
						<div class="module message">
							<div class="module-head">
								<h3>Request Blog Management</h3>
							</div>

							<div class="module-option clearfix">

								<div>
									<form id="btnSearchReportTransactionByName"
										action="adminViewReportActionBySearch.html" method="post">
										<div class="input-append pull-left">
											<input type="text" class="span3"
												placeholder="Search By Name..." name="txtSearchByFirstName"
												id="txtSearchByFirstName" autocomplete="off" spellcheck="false">
											<button type="submit" class="btn">
												<i class="icon-search"></i>
											</button>
										</div>
									</form>
									<a id="btnShowAdvanceSearch"
										style="float: left; padding-left: 10px; padding-right: 10px; padding-top: 5px">Advance
										Search</a>
									<div class="pull-right">
										<a href="javascript:;" class="btn btn-primary"
											onclick="printPage('contentReport');">Popup</a> <a
											id="btnExportPDF" href="javascript:;" onclick="exportPDF();"
											class="btn btn-primary">Export PDF</a>
									</div>
								</div>
								<br> <br>
								<div id="panelAdvanceSearch"
									style="text-align: left; display: none;">
									<form action="adminViewReportActionByAdvanceSearch.html"
										id="btnSearchReportTransactionAdvance" method="post">
										<div style="display: block">

											<div class="" style="width: 220px; float: left">
												<label for="">Admin ID: </label>
												<div class="controls row-fluid">
													<input class="span12" type="text" id="txtUserNameImpact"
														placeholder="Username" name="txtUserNameImpact">
												</div>
											</div>
											<div class=""
												style="width: 220px; float: left; margin-left: 30px;">
												<label for="">Account ID: </label>
												<div class="controls row-fluid">
													<input class="span12" type="text" id="txtUserNameAffected"
														placeholder="Assignee" name="txtUserNameAffected">
												</div>
											</div>
										</div>
										<div style="display: block; clear: both">
											<div class="" style="width: 220px; float: left;">
												<label for="">Date Range: </label> <input class=""
													type="text" id="txtFromDate" placeholder="From"
													style="float: left" name="txtFromDate" data-inputmask="'alias': 'yyyy-mm-dd'" data-mask>
											</div>
											<div class=""
												style="width: 220px; float: left; margin-left: 30px;">
												<label for="" style="color: white">invisible</label> <input
													class="" type="text" id="txtToDate" placeholder="To"
													style="float: left;" name="txtToDate" data-inputmask="'alias': 'yyyy-mm-dd'" data-mask>
											</div>
										</div>
										<div style="display: block; clear: both">
											<div class="" style="width: 220px; float: left;">
												<label class="control-label" for="basicinput">Role:</label>
												<select tabindex="1" data-placeholder="" class="span8"
													style="width: 220px;" name="cbbRole" id="cbbRole">
													<option value="">All</option>
													<option value="User Admin">User Admin</option>
													<option value="User Support">User Support</option>
													<option value="User System">User System</option>
												</select>
											</div>
											<div class=""
												style="width: 220px; float: left; margin-left: 30px">
												<label class="control-label" for="basicinput">Status:</label>
												<select tabindex="1" data-placeholder="" class="span8"
													style="width: 220px;" name="cbbStatus" id="cbbStatus">
													<option value="">All</option>
													<option value="5">Completed</option>
													<option value="6">Rejected</option>
												</select>
											</div>
										</div>
										<div class="" style="clear: both">
											<div class="controls clearfix">
												<button type="submit" class="btn btn-primary pull-left"
													style="margin-left: 15px;">Search</button>
												<button type="button" id="btnHideAdvanceSearch"
													class="btn btn-primary pull-left"
													style="margin-left: 15px;">Hide</button>
											</div>
										</div>
									</form>
								</div>

							</div>
							<div class="module-body table"  id="tableContent">
								<table class="table table-striped table-hover sortable"
									id="table_Report_Transaction">
									<thead>
										<tr>
											<th>#</th>
											<th>Full Name</th>
											<th>Role</th>
											<th>Task</th>
											<th>Account User</th>
											<th>Command</th>
											<th>Date of Process</th>
											<th>Status</th>
										</tr>
									</thead>
									<tbody>

									</tbody>
								</table>
							</div>
						</div>
						<div class="module-foot"></div>
					</div>
				</div>
				<!--/.content-->
			</div>
			<!--/.span9-->
		</div>
	</div>
	<!--/.container-->
	</div>
	<!--/.wrapper-->
	<div class="footer">
		<%@include file="footer.jsp"%>
	</div>
	<div align="center" id="contentReport"
		style="visibility: hidden; display: inline;">


		<div class="container"
			style="width: 100%; padding-right: 0px; margin-left: 0%; height: 7%; background-color: gainsboro;">
			<a class="" data-toggle="collapse"
				data-target=".navbar-inverse-collapse"> </a>
			<p class="brand" href="#"
				style="padding-left: 150px; color: black; font-size: 36px; font-style: italic; margin-top: 2%">CSC
				Vietnam eBanking</p>
			<!-- /.nav-collapse -->
		</div>
		<br> <br>
		<h3 align="center">Report Action Of Admin</h3>
		<div class="module-body table">
			<table class="table table-striped table-hover sortable"
				style="color: black" id="table_Report_Transaction2">
				<thead>
					<tr>
						<th>#</th>
						<th>Full Name</th>
						<th>Role</th>
						<th>Task</th>
						<th>Account User</th>
						<th>Command</th>
						<th>Date of Process</th>
						<th>Status</th>
					</tr>
				</thead>
				<tbody>

				</tbody>
			</table>
			<div class="pagination pagination-centered" id="pageNavPosition">
			</div>
		</div>

	</div>
</body>

<script type="text/javascript"
	src="resources/main/autocomplete/typeahead.bundle.js"></script>
<script type="text/javascript"
	src="resources/main/autocomplete/bootstrap3-typeahead.js"></script>
<script type="text/javascript"
	src="resources/main/autocomplete/bootstrap3-typeahead.min.js"></script>



<script type="text/javascript">
	var numberOfRow = $("#numberOfRow").val();
	//Init paging
	//Set number of row per pages
	var pager = new Pager('table_Report_Transaction', 15);
	pager.init();
	pager.showPageNav('pager', 'pageNavPosition');
	pager.showPage(1);
	//End - Init paging
</script>
<script type="text/javascript">
            $(function() {
                //Datemask dd/mm/yyyy
                $("#datemask").inputmask("dd-mm-yyyy", {"placeholder": "dd-mm-yyyy"});
                //Money Euro
                $("[data-mask]").inputmask();})
                </script>
<script type="text/javascript">

$(document).ready(function(){
	$
	.get('${pageContext.request.contextPath}/autoCompleteRequestTransactionAdminSearchName.json',
			function(data) {
		
				$("#txtSearchByFirstName").typeahead({
					source : data
				});
			}, 'json');
});

</script>


<script>
	$(document)
			.ready(
					function() {
						$("#chkTimeOut")
								.click(
										function() {
											var checkbox = document
													.getElementById("chkTimeOut");
											if (checkbox.checked == true) {
												document
														.getElementById("txtTimeOut").value = "30";
											} else {
												document
														.getElementById("txtTimeOut").value = "0";
											}
										});

						$("#btnShowAdvanceSearch").click(function() {
							$("#panelAdvanceSearch").slideDown("slow");
						});

						$("#btnHideAdvanceSearch").click(function() {
							$("#panelAdvanceSearch").slideUp("slow");
						});
						
						
						// Search By Name
						$("#btnSearchReportTransactionByName")
								.submit(
										function(event) {
											event.preventDefault();

											var value = $("#txtSearchByFirstName").val();

											jQuery.ajax({url : '${pageContext.request.contextPath}/viewReportActionUsingUserNameJSON/'
																		+ value
																		+ '.json',
																method : 'POST',
																contentType : 'application/json',
																data : $(
																		'#btnSearchReportTransactionByName')
																		.serialize()
															})
													.done(function(data) {
																// Do something with the response
					$("#tableContent")
				.append(
						"<div class=\"pagination pagination-centered\" id=\"pageNavPosition\"></div>");
											var length = data.length;
											$("#table_Report_Transaction > tbody").html("");
											$("#table_Report_Transaction2 > tbody").html("");
											
											if (length == 0) {
												var content = '<tr>';
												content += '<td colspan="8" style="text-align:center;">';
												content += 'No matching request transactions found';
												content += '</td>';
												content += '</tr>';
												$("#table_Report_Transaction > tbody").append(content);
												$("#table_Report_Transaction2 > tbody").append(content);
											} else {
											for(var i =0;i<length;i++)
											{	

												var content ="<tr>";					
												content+="<td >"+data[i].transactionId+"</td>";
												content+="<td >"+ data[i].accImpact.accountFirstName+ " " + data[i].accImpact.accountLastName + " " + data[i].accImpact.accountMidName +" </td>";
												content+="<td >"+ data[i].accImpact.systemAccountType.typeName+"</td>";
												content+="<td >"+ data[i].actionTransaction+"</td>";
												content+="<td >"+ data[i].accAffected.accountLoginId+"</td>";
												content+="<td >"+ data[i].command+"</td>";
												content+="<td >"+ data[i].dateTransaction+"</td>";
												if(data[i].systemStatus.statusId == 5){
													content+="<td style='color: green'>Complete</td>"
												}else if(data[i].systemStatus.statusId == 6){
													content+="<td style='color: red'>Reject</td>"
												}
												
												content+="</tr>";
												
												$("#table_Report_Transaction > tbody").append(content);
												$("#table_Report_Transaction2 > tbody").append(content);
											}	
											}
											pager = new Pager('table_Report_Transaction', 15);
											pager.init();
											pager.showPageNav('pager', 'pageNavPosition');
											pager.showPage(1);
											
											$('#table_Report_Transaction').DataTable();
											$('#table_Report_Transaction2').DataTable();

															}).fail(function() {
														// Whoops; show an error.
														alert("failed");
													});

										});

						// Search Advance
						$("#btnSearchReportTransactionAdvance")
								.submit(
										function(event) {
											event.preventDefault();

											var accImp = $("#txtUserNameImpact")
													.val();
											var accAff = $(
													"#txtUserNameAffected")
													.val();
											var fromDate = $("#txtFromDate")
													.val();
											var toDate = $("#txtToDate").val();
											var cbRole = $("#cbbRole").val();
											var cbStatus = $("#cbbStatus")
													.val();

											if (accImp == "") {
												accImp = "null";
											}
											if (accAff == "") {
												accAff = "null";
											}
											if (fromDate == "") {
												fromDate = "null";
											}
											if (toDate == "") {
												toDate = "null";
											}
											if (cbRole == "") {
												cbRole = "null";
											}
											if (cbStatus == "") {
												cbStatus = "null";
											}

											jQuery.ajax({url : '${pageContext.request.contextPath}/viewReportActionUsingAdvanceSearchJSON/'
																		+ accImp
																		+ '/'
																		+ accAff
																		+ '/'
																		+ fromDate
																		+ '/'
																		+ toDate
																		+ '/'
																		+ cbRole
																		+ '/'
																		+ cbStatus
																		+ '.json',
																method : 'POST',
																contentType : 'application/json',
																data : $(
																		'#btnSearchReportTransactionAdvance')
																		.serialize()
														})
											.done(function(data) 
													{
												var length = data.length;
												$("#tableContent")
												.append(
														"<div class=\"pagination pagination-centered\" id=\"pageNavPosition\"></div>");
												$("#table_Report_Transaction > tbody").html("");
												$("#table_Report_Transaction2 > tbody").html("");
												
												if (length == 0) {
													var content = '<tr>';
													content += '<td colspan="8" style="text-align:center;">';
													content += 'No matching request transactions found';
													content += '</td>';
													content += '</tr>';
													$("#table_Report_Transaction > tbody").append(content);
													$("#table_Report_Transaction2 > tbody").append(content);
												} else {
												for(var i =0;i<length;i++)
												{	

													var content ="<tr>";					
													content+="<td >"+data[i].transactionId+"</td>";
													content+="<td >"+ data[i].accImpact.accountFirstName+ " " + data[i].accImpact.accountLastName + " " + data[i].accImpact.accountMidName +" </td>";
													content+="<td >"+ data[i].accImpact.systemAccountType.typeName+"</td>";
													content+="<td >"+ data[i].actionTransaction+"</td>";
													content+="<td >"+ data[i].accAffected.accountLoginId+"</td>";
													content+="<td >"+ data[i].command+"</td>";
													content+="<td >"+ data[i].dateTransaction+"</td>";
													if(data[i].systemStatus.statusId == 5){
														content+="<td style='color: green'>Complete</td>"
													}else if(data[i].systemStatus.statusId == 6){
														content+="<td style='color: red'>Reject</td>"
													}
													
													content+="</tr>";
													
													$("#table_Report_Transaction > tbody").append(content);
													$("#table_Report_Transaction2 > tbody").append(content);
												}	
												}
												pager = new Pager('table_Report_Transaction', 15);
												pager.init();
												pager.showPageNav('pager', 'pageNavPosition');
												pager.showPage(1);
												
												$('#table_Report_Transaction').DataTable();
												$('#table_Report_Transaction2').DataTable();
												
															}).fail(function() {
														// Whoops; show an error.
														alert("failed");
													});

										});
						

					});
</script>
</html>
